import React from 'react';
import { message, Tooltip } from 'antd';
import { connect } from 'react-redux';

import RiskList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import services from '../../../services/api';
import CodeLabel from '../../../components/CodeLabel';

function mapStateToProps(state) {
  return {
    case_source_type: state.code.case_source_type || [],
    risk_level: state.code.risk_level || []
  };
}

@connect(mapStateToProps)
class TaskCenter extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'caseTask';
    this.listsComponent = RiskList;
    this.model_width = 400;
    this.state = {
      ...this.state,
      defaultColumns: [
        'request_id',
        'request_time',
        'risk_level',
        'app_name',
        'product_name',
        'event_name',
        'status',
        'dispatch_name',
        'create_time',
        'source_type'
      ],
    };
    this.tabs = [
      { key: '0', name: '待我审核', keyName: 'is_check' },
      { key: '1', name: '我已审核' }
    ]
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }
  // swtichStatus
  handleSwitchStatus = (record) => {
    const param = {
      id: record.id,
      status: record.status === 1 ? 2 : 1,
    };
    services.riskMonitor.switchStatus(param).then((data) => {
      if (data.code === 0) {
        message.success(data.msg);
        this.freshQueryList();
      } else {
        message.error(data.msg);
      }
    });
  };

  // 筛选列表，含参数
  freshQueryList = () => {
    let queryParams = { ...{}, ...this.queryParams }
    if (this.state.tabKey === '1') {
      queryParams.between_start_create_time && delete queryParams.between_start_create_time
      queryParams.between_end_create_time && delete queryParams.between_end_create_time
    } else {
      queryParams.between_start_case_end_time && delete queryParams.between_start_case_end_time
      queryParams.between_end_case_end_time && delete queryParams.between_end_case_end_time
    }
    this.queryList({ ...queryParams, ...this.queryTableParams, ...this.queryPanigation, ...this.getTabParams() });
  };

  getColumns = () => {
    return [
      {
        title: '请求ID',
        key: 'request_id',
        dataIndex: 'request_id',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '发生时间',
        key: 'request_time',
        dataIndex: 'request_time',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('评估结果', this.props.risk_level, 'risk_level', this.refreshTableFilter, [
              'key',
              'value'
            ])}
          </>
        ),
        key: 'risk_level',
        dataIndex: 'risk_level',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={<CodeLabel code={'risk_level'} value={text} />}>
              <CodeLabel code={'risk_level'} value={text} />
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithAppV2.bind(this, 'app_id'), [
              'app_id',
              'app_name'
            ])}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联产品', this.state.products, 'product_id', this.refreshTableFilterWithAppV2.bind(this, 'product_id'), [
              'product_id',
              'product_name'
            ])}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联事件', this.state.events, 'event_id', this.refreshTableFilterWithAppV2.bind(this, 'event_id'), [
              'event_id',
              'event_name'
            ])}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (this.state.tabKey === '1' ?
          <>
            {this.getFilterTitle('状态',
              [
                {
                  value: 2,
                  name: '已分配'
                },
                {
                  value: 3,
                  name: '已结案'
                }
              ],
              'status',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </> : '状态'
        ),
        key: 'status',
        dataIndex: 'status',
        ellipsis: true,
      },
      {
        title: this.state.tabKey === '1' ? '结案人' : '分配人',
        key: 'dispatch_name',
        dataIndex: this.state.tabKey === '1' ? 'case_end_user_name' : 'dispatch_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: this.state.tabKey === '1' ? '结案时间' : '分配时间',
        key: 'create_time',
        dataIndex: this.state.tabKey === '1' ? 'case_end_time' : 'create_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('案件来源', this.props.case_source_type, 'source_type', this.refreshTableFilter, [
              'key',
              'value'
            ])}
          </>
        ),
        key: 'source_type',
        dataIndex: 'source_type',
        ellipsis: true,
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'request_time',
        name: ['between_start_request_time', 'between_end_request_time'],
        placeholder: ['发生时间开始', '发生时间结束'],
      },
      this.state.tabKey === '1' ?
        {
          type: 'rangepicker',
          key: 'case_end_time',
          name: ['between_start_case_end_time', 'between_end_case_end_time'],
          placeholder: ['结案时间开始', '结案时间结束'],
        } : {
          type: 'rangepicker',
          key: 'create_time',
          name: ['between_start_create_time', 'between_end_create_time'],
          placeholder: ['分配时间开始', '分配时间结束'],
        },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入请求ID进行搜索',
      },
    ];
    return (
      <div>
        <FilterTool
          data={data}
          colNum={1}
          query={this.freshQueryList}
          refreshFilter={this.refreshFilter}
          refresh={this.resetList}
          columns={this.getColumns()}
          defaultColumns={this.state.defaultColumns}
          setColumn={this.setColumn}
          isOnChange={true}
          export={this.export}
        />
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            mediator={this}
            edit={this.edit}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey={(record, index) => index}
            tabs={this.tabs}
            tabChange={this.tabChange}
          />
        </div>
      </div>
    );
  }
}

export default TaskCenter;
